import React, {Component} from 'react';
import BlockNote from "../BlockNote";
import {Col, Row, Timeline} from "antd";
import {CheckCircleFilled} from "@ant-design/icons";

const getDateStr = () => {
    let d = new Date();
    return String(d.getFullYear()) + "-" + String(d.getMonth()) + "-" + String(d.getDate())
}

class LeaveNote extends Component {
    state = {
        username: "",
        className: "",
        phone: "",
        id: ""
    }

    componentDidMount() {
        let username = localStorage.getItem("username");
        let className = localStorage.getItem("classname");
        let phone = localStorage.getItem("phone");
        let id = localStorage.getItem("id");
        this.setState({
            username, className, phone, id
        })
    }

    render() {
        let timeStr = getDateStr();
        let { username, phone, className, id } = this.state;
        const data1 = {
            title: "请假信息",
            data: [
                {title: "请假类型", value: "保定市内出行备案"},
                {title: "请假性质", value: "因私请假"},
                {title: "请假日期", value: timeStr + " 08:00 至 "+ timeStr+" 22:00"},
                {title: "请假天数", value: "1"},
                {title: "请假去向", value: "河北省保定市莲池区"},
                {title: "请假事由", value: "  "},
                {title: "证明材料", value: "  "},
                {title: "暂无数据", value: "  "},
                {title: "手机号", value: phone},
            ]
        }
        const data2 = {
            data: [
                {title: "请假行程", value: "去校外看病"}
            ]
        }
        const data3 = {
            title: "个人信息",
            data: [
                {title: "院系", value: "计算机系"},
                {title: "班级", value: className},
                {title: "姓名", value: username},
                {title: "学号", value: id},
            ]
        }
        return (
            <div style={{ backgroundColor: "#f5f5f5"}}>
                <div style={{ height: "14px"}}/>
                <BlockNote {...data1}/>
                <BlockNote {...data2}/>
                <BlockNote {...data3}/>
                <div style={{ height: "24px"}}/>
                <div className="leave-note-block-div">
                    <div className="leave-note-title-div">
                        审核流程
                    </div>
                    <div style={{ paddingTop: "16px", fontSize: "16px" }}>
                        <Row>
                            <Col span={8}>
                                <div style={{ float: "right", paddingRight: "14px", color: "#8c8c8c"}}>
                                    {timeStr}
                                </div>
                            </Col>
                            <Col span={15}>
                                <div style={{ height: "6px"}}/>
                                <Timeline>
                                    <Timeline.Item dot={<CheckCircleFilled style={{ fontSize: "20px", color: "#13c2c2"}}/>} style={{ fontSize: "16px" }}>提交申请</Timeline.Item>
                                    <Timeline.Item dot={<CheckCircleFilled style={{ fontSize: "20px", color: "#13c2c2"}}/>} style={{ fontSize: "16px" }}>结束</Timeline.Item>
                                </Timeline>
                            </Col>
                        </Row>
                    </div>
                </div>
                <div style={{ height: "36px"}}/>
            </div>
        );
    }
}

export default LeaveNote;
